<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-shareBackgroundImageUrl="{scope}">
				<el-image
					class="bj-img"
					:src="scope.row.shareBackgroundImageUrl | image_ali"
				></el-image>
			</template>
			<template #table-column-joinGroupQRCode="{scope}">
				<el-image class="bj-img" :src="scope.row.joinGroupQRCode | image_ali"></el-image>
			</template>

			<template #table-column-isDefault="{scope}">
				<span v-if="scope.row.isDefault == 1">是</span>
				<span v-else>否</span>
			</template>
			<template #table-column-isWindow="{scope}">
				<span v-if="scope.row.isWindow == 1">是</span>
				<span v-else>否</span>
			</template>
			<template #table-column-redPacketUrlStatus="{scope}">
				<span v-if="scope.row.redPacketUrlStatus == 1">是</span>
				<span v-else>否</span>
			</template>
			<template #table-column-redPacketUrlType="{scope}">
				<span v-if="scope.row.redPacketUrlType == 1">外部链接</span>
				<span v-else>小程序链接</span>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
		<cl-form ref="updata-avtive"></cl-form>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import subsidiesToday from './components/subsidiesToday';
import ActiveBox from './components/ActiveBox';
import numberSection from './components/numberSection';
import _ from 'lodash';
import store from 'store';
export default {
	data() {
		return {
			defaultCfg: [],
			crud: null,
			enterGoodsInfo: {},
			dayAllowance: [],
			value: '',
			options: [],
			pikerVal: moment().format('YYYY-MM-DD'),
			tabLoading: true
		};
	},
	components: {
		// eslint-disable-next-line
		subsidiesToday
	},
	mounted() {},
	computed: {
		...mapGetters(['platformList']),
		filterplatForm() {
			return function(val) {
				return this.platformList.length == 0
					? val
					: this.platformList.filter(v => v.value == val)[0].label;
			};
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			let self = this;
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.wxjljConfig)
				.set('dict', {
					api: {
						page: 'page'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '分享背景图',
							prop: 'shareBackgroundImageUrl',
							align: 'center',
							width: 200
						},
						{
							label: '进群二维码',
							prop: 'joinGroupQRCode',
							align: 'center',
							width: 200
						},
						{
							label: '今日补贴金',
							prop: 'subsidiesToday',
							align: 'center',
							'min-width': 150
						},

						{
							label: '分享补贴金额',
							prop: 'shareAmount',
							align: 'center',
							'min-width': 100
						},
						{
							label: '每日可分享次数',
							prop: 'shareNum',
							align: 'center',
							'min-width': 100
						},
						{
							label: '每日几点开抢',
							prop: 'startVieTime',
							align: 'center',
							'min-width': 100
						},
						{
							label: '红包弹窗文案',
							prop: 'popText',
							align: 'center',
							'min-width': 100
						},
						{
							label: '分享标题',
							prop: 'shareTitle',
							align: 'center',
							'min-width': 100
						},
						{
							label: '是否默认',
							prop: 'isDefault',
							align: 'center'
						},
						{
							label: '是否弹窗',
							prop: 'isWindow',
							align: 'center'
						},
						{
							label: '首页红包链接',
							prop: 'redPacketUrlStatus',
							align: 'center',
							'min-width': 120
						},
						{
							label: '链接类型',
							prop: 'redPacketUrlType',
							align: 'center'
						},
						{
							label: '跳转链接',
							prop: 'redPacketJumpUrl',
							align: 'center',
							'min-width': 150
						}
					],

					op: {
						visible: true,
						layout: ['slot-active', 'edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '180px',
						center: true,
						'custom-class': 'custom-class-dialog',
						width: '970px'
					},
					items: [
						{
							label: '是否默认配置',
							prop: 'isDefault',
							value: 0,
							span: 12,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 0
									}
								]
							}
						},
						{
							prop: 'subsidiesToday',
							label: '今日补贴金',
							component: {
								name: 'subsidiesToday-c',
								methods: {
									input(val) {
										this.$emit('input', val);
									}
								},
								props: {
									value: [String, Number]
								},
								render() {
									return (
										<subsidiesToday
											value={this.value}
											onInput={this.input}></subsidiesToday>
									);
								}
							},
							rules: [
								{
									required: true,
									message: '请选择渠道',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'shareAmount',
							label: '分享可得补贴金额',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入分享可得补贴金额'
								}
							},
							rules: {
								required: true,
								message: '分享可得补贴金额不能为空'
							}
						},
						{
							prop: 'shareNum',
							label: '每日可分享次数',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入每日可分享次数'
								}
							},
							rules: {
								required: true,
								message: '每日可分享次数不能为空'
							}
						},
						{
							label: '主题累计已发金额（亿）',
							prop: 'totalGeSubsidiestAmount',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									max: 10000,
									precision: 2
								}
							}
						},
						{
							label: '主题今日已发金额（万）',
							prop: 'todayGetSubsidiesAmount',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									max: 10000,
									precision: 2
								}
							}
						},
						{
							label: '每日几点开抢',
							prop: 'startVieTime',
							span: 12,
							component: {
								name: 'el-input-number',
								props: {
									min: 0,
									max: 24,
									precision: 0
								}
							}
						},
						{
							label: '倒计时时间（分钟）',
							prop: 'countDownTime',
							span: 12,
							value: 60,
							component: {
								name: 'el-input-number',
								props: {
									max: 10000,
									precision: 0
								},
								attrs: {
									placeholder: '小于0为当天23:59:59'
								}
							}
						},
						{
							prop: 'floorIds',
							label: '商品分类',
							value: [],
							component: {
								name: 'el-select',
								props: {
									multiple: true
								},
								options: []
							}
						},
						{
							prop: 'shareTitle',
							label: '分享标题',
							span: 24,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'shareImageUrl',
							label: '分享图片',
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'shareBackgroundImageUrl',
							label: '分享背景图',
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'joinGroupQRCode',
							label: '进群二维码',
							component: {
								name: 'el-input'
							}
						},
						{
							label: '是否展示进群二维码',
							prop: 'joinGroupButtonShow',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 2
									}
								]
							}
						},
						{
							prop: 'popText',
							label: '红包弹窗文案',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入红包弹窗文案'
								}
							},
							rules: {
								required: true,
								message: '红包弹窗文案不能为空'
							}
						},
						{
							label: '是否默认弹窗红包',
							prop: 'isWindow',
							value: 0,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 0
									}
								]
							}
						},
						{
							label: '首页红包链接',
							prop: 'redPacketUrlStatus',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 0
									}
								]
							}
						},
						{
							label: '链接类型',
							prop: 'redPacketUrlType',
							value: 0,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '外部链接',
										value: 1
									},
									{
										label: '小程序链接',
										value: 0
									}
								]
							}
						},
						{
							prop: 'redPacketJumpUrl',
							label: '跳转链接',
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini',
									platformPrice: '请输入跳转链接'
								}
							},
							rules: {
								required: true,
								message: '跳转链接不能为空'
							}
						},
					],
					op: {
						visible: true,
						layout: ['confirm']
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', async (isopen, data) => {
					let classList = await this.$service.goodsMenagement.specialClassify.list({
						specialType: 104
					});

					app.setData(
						'upsert.items[prop:floorIds].component.options',
						classList.map(e => {
							return {
								label: e.mainName,
								value: e.floorId
							};
						})
					);
					// 新增打开表单
					if (isopen) {
						if (data.floorIds) {
							app.setForm(
								'floorIds',
								data.floorIds.split(',').map(e => {
									return Number(e);
								})
							);
						}
					}
				})
				.on('refresh', async (params, { next }) => {
					await next(params);
				})
				.on('submit', (isOpen, data, { next }) => {
					console.log(data);

					if (data.floorIds) {
						data.floorIds = data.floorIds.join();
					}

					data.shareAmount = Number(data.shareAmount);
					data.shareNum = Number(data.shareNum);

					console.log(data);
					next({
						...data
					});
				})
				.done();
			this.$service.goodsMenagement.bwbtConfig.defaultConfig().then(res => {
				this.defaultCfg = res;
			});
			app.refresh({
				prop: 'createTime',
				order: 'desc',
				time: moment().format('YYYY-MM-DD')
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.bj-img {
	width: 150px;
	height: 100px;
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}
.el-form-item__content {
	.cl-upload {
		display: block;
	}
}
.tabbar-box {
	display: flex;
	flex-wrap: wrap;
}
.tabbar-li {
	width: 40%;
	margin: 0 20px;
}
</style>
